{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- zui -->
    <link href="https://cdn.bootcss.com/zui/1.8.1/css/zui-theme.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/zui/1.8.1/css/zui.min.css" rel="stylesheet">
    <!-- font-Awesome -->
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- mycss -->
    <link href="{% static 'recommendation/css/mycss.css' %}" rel="stylesheet">

    <!-- js -->
    <!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <!-- ZUI Javascript组件 -->
    <script src="https://cdn.bootcss.com/zui/1.8.1/js/zui.min.js"></script>
    <title>Title</title>
</head>
<body>
<div class="container">
    <div class="cards cards-borderless">
    <div class="col-md-4 col-sm-6 col-lg-3">
        <a class="card" href="###">
            <img src="{% static 'show/img/img2.jpg' %}" alt="">
            <div class="caption">“良辰美景” 出自《牡丹亭》</div>
            <div class="card-heading"><strong>良辰美景</strong></div>
            <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
        </a>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
        <a class="card" href="###">
            <img src="{% static 'show/img/img2.jpg' %}" alt="">
            <div class="caption">“良辰美景” 出自《牡丹亭》</div>
            <div class="card-heading"><strong>良辰美景</strong></div>
            <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
        </a>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
        <a class="card" href="###">
            <img src="{% static 'show/img/img2.jpg' %}" alt="">
            <div class="caption">“良辰美景” 出自《牡丹亭》</div>
            <div class="card-heading"><strong>良辰美景</strong></div>
            <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
        </a>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
        <a class="card" href="###">
            <img src="{% static 'show/img/img2.jpg' %}" alt="">
            <div class="caption">“良辰美景” 出自《牡丹亭》</div>
            <div class="card-heading"><strong>良辰美景</strong></div>
            <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
        </a>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
        <a class="card" href="###">
            <img src="{% static 'show/img/img2.jpg' %}" alt="">
            <div class="caption">“良辰美景” 出自《牡丹亭》</div>
            <div class="card-heading"><strong>良辰美景</strong></div>
            <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
        </a>
    </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
    <a class="card" href="###">
      <img src="{% static 'show/img/img2.jpg' %}" alt="">
      <div class="caption">“良辰美景” 出自《牡丹亭》</div>
      <div class="card-heading"><strong>良辰美景</strong></div>
      <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
    </a>
  </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
    <a class="card" href="###">
      <img src="{% static 'show/img/img2.jpg' %}" alt="">
      <div class="caption">“良辰美景” 出自《牡丹亭》</div>
      <div class="card-heading"><strong>良辰美景</strong></div>
      <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
    </a>
  </div>
      <div class="col-md-4 col-sm-6 col-lg-3">
    <a class="card" href="###">
      <img src="{% static 'show/img/img2.jpg' %}" alt="">
      <div class="caption">“良辰美景” 出自《牡丹亭》</div>
      <div class="card-heading"><strong>良辰美景</strong></div>
      <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
    </a>
  </div>
</div>

</div>
</body>
</html>